<template>
  <div style="margin-top: 20px;width: 360px">
    <el-upload class="upload-css" :file-list="uploadFiles" ref="upload" drag :on-success="upLoadSuccess"
               :on-error="upLoadError" :action="uploadURL" :auto-upload="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em><br>
        单个文件不超过28M
      </div>
      <!--      <div class="el-upload__tip" slot="tip">-->
      <!--        上传招标文件，且不超过28M-->
      <!--      </div>-->
    </el-upload>
    <el-button style="margin-top:10px;margin-left: 120px;width: 100px" size="small" type="success" @click="submitUpload">点击上传</el-button>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  props: ["projectId"],
  data() {
    return {
      projectName: "",
      //uploadURL: "/project/upload?a=1",
      uploadFiles: [] //上传的文件列表
    };
  },
  computed: {
    //文件的上传路径
    //附带用户id和项目名称
    uploadURL: function () {
      //var userId = this.$store.state.userId;
      return "http://localhost:8088/api/upload?id="+this.$store.getters.getUser.id+"&projectId="+this.projectId;
    }
  },
  methods: {
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件上传成功时的钩子
    upLoadSuccess(response, file) {
      if (response === 200) {
        console.log(response + "已上传" + file);
        console.log("项目添加成功");
      } else {
        console.log("项目添加失败");
      }
    },
    //文件上传失败时的钩子
    upLoadError() {
      console.log("项目添加失败");
    }
  }
};

</script>

<style lang="scss" scoped>
</style>